<!DOCTYPE html>
<head >
  <title>Map</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="jquery-jvectormap-2.0.5.css">
</head>
<body style="width: 1920px; height: 1080px">
<div id="world-map-gdp" style="width: 100%; height: 100%">
</div>

<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-jvectormap-2.0.5.min.js"></script>
<script src="jquery-jvectormap-world-mill.js"></script>
<script src="gdp-data.js"></script>

<script>
$(function(){

	// https://jvectormap.com/examples/markers-world/
	$('#world-map-gdp').vectorMap({
		map: 'world_mill',
		series: {
		  regions: [{
			values: gdpData,
			scaleColors: ['#C8EEFF', '#0071A4'],
			normalizeFunction: 'polynomial',
			hoverOpacity: 0.7,
			hoverColor: false,
			backgroundColor: '#383f47',
		  }]
		},
		onRegionTipShow: function(e, el, code){
		  el.html(el.html()+' (GDP - '+gdpData[code]+')');
		}
	});
		
});
</script>
</body>
</html>
